﻿@model ScrumTracker.Model.Product
@{
    ViewBag.Title = "Get";
}
@section head{
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/story.css")" />
    <script src="@Url.Content("~/scripts/st-product.js")" type="text/javascript"></script>
}
@section bcrumbs{
    <li><a href="@Url.Content("~")" class="home-house-inactive">Home</a></li>
    <li><a href="#" class="bread-crumbs-btn lab-product-name">@Model.Name</a></li>
}
<div class="edit-bar">
    <ul class="buttons">
        <li>
            <div id="edit-product" class="btn edit">
            </div>
        </li>
        <li class="separator"></li>
    </ul>
</div>
<div class="product-inner-wrapper">
    <!-- edit ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
    @*<form>
    <div class="product-edit-wrapper">
        <ul class="credential-list">
            <li>
                <label>
                    product name</label>
                <input type="text" class="input-text-field">
            </li>
            <li>
                <label>
                    product description</label>
                <textarea class="input-text-area"></textarea>
            </li>
            <li>
                <div class="switch-checkbox-wrapper">
                    <label class="switch-checkbox-label float-left">
                        product visibility</label>
                    <div class="switch-checkbox float-left">
                        <input id="check" name="1" type="checkbox" value="1" class="desktop">
                        <label for="check">
                            Check-me</label>
                    </div>
                </div>
                <!-- end of switch checkbox wrapper -->
            </li>
            <li>
                <input type="submit" value="cancel" class="cancel-btn float-left">
                <input type="submit" value="save" class="save-btn float-left">
            </li>
        </ul>
        <!-- end of credential list -->
    </div>
    <!-- end of product edit wrapper -->
    </form>*@
    @using (Html.BeginForm("update", "products", new { @id = Model.ProductId }, FormMethod.Post, new { @class = "new-product-edit-wrapper ajax" }))
    {
        @Html.Partial("~/Views/Products/_UpdateProductForm.cshtml", Model)
    }
    <!-- dashboaard /////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
    <div class="product-dashboard-wrapper">
        <div class="product-dashboard-header">
            <div id="product-dashboard-trigger" class="triangle-up-down float-left">
            </div>
            <div class="section-name float-left">
                Product Dashboard
            </div>
            <ul class="drag-vertical-gripp float-right">
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
            </ul>
            <!-- end of drag vertical gripp -->
        </div>
        <!-- end of product dashboard header -->
        <!-- end of dashboard header -->
        <div class="product-dashboard-body">
            <div class="release-burndown-chart-wrapper float-left">
                <div class="release-burndown-chart-header">
                    Release Burndown
                </div>
                <div>
                    <img src="@Url.Content("~/Content/images/chart-placeholder.png")" width="268" height="225" alt="chart-placeholder">
                </div>
            </div>
            <!-- end of realease burndown wrapper -->
            <div class="two-cell-display-wrapper float-left">
                <ul class="two-cell-display">
                    <li>
                        <div class="text-cell">
                            Team Velocity</div>
                    </li>
                    <li>
                        <div class="nr-cell">
                            25</div>
                    </li>
                </ul>
                <!-- end of two cell display -->
                <ul class="two-cell-display">
                    <li>
                        <div class="text-cell">
                            Days Required</div>
                    </li>
                    <li>
                        <div class="nr-cell">
                            3.5</div>
                    </li>
                </ul>
                <!-- end of two cell display -->
            </div>
            <!-- end of two cell display wrapper -->
            <ul class="recent-activity-wrapper float-left">
                <li>
                    <div class="recent-activity-header">
                        Recent Activity
                    </div>
                </li>
                <li>
                    <ul class="recent-activity-item">
                        <li>
                            <div class="avatar-2">
                                <img alt="avatar" src="@Url.Content("~/Content/images/avatar.png")">
                            </div>
                            <!-- end of avatar 2 -->
                        </li>
                        <li>
                            <p>
                                User 1
                            </p>
                        </li>
                        <li>
                            <div class="dark-insent-line-vertical height-2">
                                <div class="ddark-line-v">
                                </div>
                                <div class="dbright-line-v">
                                </div>
                            </div>
                            <!-- end of insent-line-vertical -->
                        </li>
                        <li>
                            <p class="recent-activity-date">
                                01/01/2012
                            </p>
                        </li>
                        <li>
                            <div class="dark-insent-line-vertical height-2">
                                <div class="ddark-line-v">
                                </div>
                                <div class="dbright-line-v">
                                </div>
                            </div>
                            <!-- end of insent-line-vertical -->
                        </li>
                        <li>
                            <p class="edit-activity-description">
                                Edited story “As user I...”
                            </p>
                        </li>
                    </ul>
                    <!-- end of recent activity item -->
                </li>
                <li>
                    <ul class="recent-activity-item">
                        <li>
                            <div class="avatar-2">
                                <img alt="avatar" src="@Url.Content("~/Content/images/avatar.png")">
                            </div>
                            <!-- end of avatar -->
                        </li>
                        <li>
                            <p>
                                User 2
                            </p>
                        </li>
                        <li>
                            <div class="dark-insent-line-vertical height-2">
                                <div class="ddark-line-v">
                                </div>
                                <div class="dbright-line-v">
                                </div>
                            </div>
                            <!-- end of insent-line-vertical -->
                        </li>
                        <li>
                            <p class="recent-activity-date">
                                01/01/2012
                            </p>
                        </li>
                        <li>
                            <div class="dark-insent-line-vertical height-2">
                                <div class="ddark-line-v">
                                </div>
                                <div class="dbright-line-v">
                                </div>
                            </div>
                            <!-- end of insent-line-vertical -->
                        </li>
                        <li>
                            <p class="edit-activity-description">
                                Updated task at 60%
                            </p>
                        </li>
                    </ul>
                    <!-- end of recent activity item -->
                </li>
            </ul>
            <!-- end of recent activity wrapper -->
            <ul class="recent-assignments-wrapper float-left">
                <li>
                    <div class="recent-assignments-header">
                        Recent Assignments
                    </div>
                </li>
                <li>
                    <ul class="recent-assignments-item">
                        <li>
                            <div class="avatar-2">
                                <img alt="avatar" src="@Url.Content("~/Content/images/avatar.png")">
                            </div>
                            <!-- end of avatar 2 -->
                        </li>
                        <li>
                            <p>
                                User 1
                            </p>
                        </li>
                        <li>
                            <div class="dark-insent-line-vertical height-2">
                                <div class="ddark-line-v">
                                </div>
                                <div class="dbright-line-v">
                                </div>
                            </div>
                            <!-- end of insent-line-vertical -->
                        </li>
                        <li>
                            <p class="edit-assignments-description">
                                Make design proposal for notification bar / 60% done and something else
                            </p>
                        </li>
                    </ul>
                    <!-- end of recent activity item -->
                </li>
                <li>
                    <ul class="recent-assignments-item">
                        <li>
                            <div class="avatar-2">
                                <img alt="avatar" src="@Url.Content("~/Content/images/avatar.png")">
                            </div>
                            <!-- end of avatar -->
                        </li>
                        <li>
                            <p>
                                User 2
                            </p>
                        </li>
                        <li>
                            <div class="dark-insent-line-vertical height-2">
                                <div class="ddark-line-v">
                                </div>
                                <div class="dbright-line-v">
                                </div>
                            </div>
                            <!-- end of insent-line-vertical -->
                        </li>
                        <li>
                            <p class="edit-assignments-description">
                                Implement stored procedure / 60% done
                            </p>
                        </li>
                    </ul>
                    <!-- end of recent activity item -->
                </li>
            </ul>
            <!-- end of recent activity wrapper -->
            <div class="developers-main-wrapper float-left">
                <div class="developer-drop-zone-wrapper float-left">
                    <div class="project-team-members-header">
                        Project Team Members
                    </div>
                    <!-- end of project team members header -->
                    <div class="developers-list-wrapper">
                        <div class="developers">
                            <div class="drag-around">
                                <span>Milos Stevanovic</span>
                            </div>
                        </div>
                        <!-- end of developer -->
                        <div class="developers">
                            <div class="drag-around">
                                <span>Stojan Ilic</span>
                            </div>
                        </div>
                        <!-- end of developer -->
                        <div class="developers">
                            <div class="drag-around">
                                <span>Vukan Vukotic</span>
                            </div>
                        </div>
                        <!-- end of developer -->
                        <div class="developers">
                            <div class="drag-around">
                                <span>Nikola Lehocki</span>
                            </div>
                        </div>
                        <!-- end of developer -->
                    </div>
                    <!-- end of developers list wrapper -->
                </div>
                <!-- end of developer drop zone wrapper -->
                <div class="developer-drop-zone-wrapper float-left">
                    <div class="all-developers-header">
                        All Developers
                    </div>
                    <!-- end of project team members header -->
                    <div class="developers-list-wrapper">
                        <div class="developers">
                            <div class="drag-around">
                                <span>Jovica Zaric</span>
                            </div>
                        </div>
                        <!-- end of developer -->
                        <div class="developers">
                            <div class="drag-around">
                                <span>Milinko Corilic</span>
                            </div>
                        </div>
                        <!-- end of developer -->
                        <div class="developers">
                            <div class="drag-around">
                                <span>Iva Stokic</span>
                            </div>
                        </div>
                        <!-- end of developer -->
                    </div>
                    <!-- end of developers list wrapper -->
                </div>
                <!-- end of developer drop zone wrapper -->
            </div>
            <!-- end of developers main wrapper -->
        </div>
        <!-- end of product dashboard body -->
    </div>
    <!-- end of product dashboard wrapper -->
    <!-- backlog ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
    <div class="product-backlog-wrapper">
        <div class="product-backlog-header">
            <div id="product-backlog-trigger" class="triangle-up-down float-left">
            </div>
            <div class="section-name float-left">
                Product Backlog
            </div>
            <ul class="drag-vertical-gripp float-right">
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
            </ul>
            <!-- end of drag vertical gripp -->
        </div>
        <!-- end of product-backlog header -->
        <!-- end of backlog header -->
        <div class="product-backlog-body">
            <div class="edit-bar">
                <ul class="buttons">
                    <li>
                        <div id="add-story" class="btn add">
                        </div>
                    </li>
                    <li class="separator"></li>
                    <li>
                        <div id="edit-story-list" class="btn edit-list">
                        </div>
                    </li>
                    <li class="separator"></li>
                </ul>
                <!-- end of edit bar btn wrapper -->
            </div>
            <div class="new-story-edit-wrapper">
                <form>
                <ul class="story-credential-list">
                    <li>
                        <label>
                            story description</label>
                        <textarea class="input-text-area"></textarea>
                    </li>
                    <li>
                        <ul class="story-atributes-wrapper">
                            <li class="first">
                                <label>
                                    priority</label>
                                <ul class="priority-numbers">
                                    <!-- pretpostavljam da ovde idu inpupt forme... da bi 
												se videlo sta se desava za sad su samo divovi -->
                                    <li>
                                        <div id="nr-five" class="priority-nr">
                                            5</div>
                                    </li>
                                    <li>
                                        <div value="4" id="nr-four" class="priority-nr">
                                            4</div>
                                    </li>
                                    <li>
                                        <div id="nr-three" class="priority-nr">
                                            3</div>
                                    </li>
                                    <li>
                                        <div id="nr-two" class="priority-nr">
                                            2</div>
                                    </li>
                                    <li>
                                        <div id="nr-one" class="priority-nr">
                                            1</div>
                                    </li>
                                </ul>
                                <!-- end of priority numbers -->
                            </li>
                            <li>
                                <label>
                                    effort</label>
                                <div class="effort-slider">
                                    <img src="@Url.Content("~/Content/images/effort-slider.png")" alt="effort-slider">
                                </div>
                            </li>
                            <li>
                                <label>
                                    type</label>
                                <select class="story-type">
                                    <option>bug </option>
                                    <option>Feature </option>
                                    <option>... </option>
                                </select>
                            </li>
                        </ul>
                        <!-- end of story-atributes-wrapper -->
                    </li>
                    <li class="cancel-save-buttons-wrapper">
                        <input type="submit" value="cancel" class="cancel-btn float-left">
                        <input type="submit" value="save" class="save-btn float-left">
                    </li>
                </ul>
                <!-- end of credential list -->
                </form>
            </div>
            <!-- end of product edit wrapper -->
            <!-- end of edit ////////////////////////////////////////////////////////////////////////////////////////////////////-->
            <div class="backlog-story-wrapper">
                <div class="backlog-story-header">
                    <div class="left-float-wrapper">
                        <div class="trigger-and-name-wrapper">
                            <div id="story-1-trigger" class="triangle-2 float-left">
                            </div>
                            <div class="backlog-story-name float-left">
                                Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus...
                            </div>
                        </div>
                        <div class="percentage-wrapper float-left">
                            <div class="percentage-bar-mask float-left">
                                <div class="percentage-bar">
                                </div>
                            </div>
                            <div class="percentage-number float-right">
                                80%
                            </div>
                        </div>
                        <!-- end of percentage-wrapper -->
                    </div>
                    <!-- end of trigger and name wrapper -->
                    <div class="buttons-badges-wrapper float-right">
                        <div class="priority-badge red float-left">
                            <div class="badge-header">
                                Priority
                            </div>
                            <div class="badge-body">
                                5
                            </div>
                        </div>
                        <!-- end of priority badge -->
                        <div class="effort-badge red float-left">
                            <div class="badge-header">
                                Effort
                            </div>
                            <div class="badge-body">
                                100
                            </div>
                        </div>
                        <!-- end of effort badge -->
                        <div class="type-badge float-left">
                            <div class="badge-header">
                                Type
                            </div>
                            <div class="badge-body-type type-red">
                                Feature
                            </div>
                        </div>
                        <!-- end of type badge -->
                        <a href="#" class="manage-btn-2 float-left">Manage</a> <a href="#" class="delete-btn-2 float-left">Delete</a>
                    </div>
                    <!-- end of buttons-badges-wrapper -->
                </div>
                <!-- end of backlog story header -->
                <div class="backlog-story-body">
                    <div class="story-tab-bar">
                        <ul class="edit-bar-btn-wrapper">
                            <li>
                                <div class="tasks-btn tab-selected">
                                    Tasks<span class="nr-of-items">(5)</span>
                                </div>
                            </li>
                            <li>
                                <div class="bright-insent-line-vertical height-1">
                                    <div class="bdark-line-v">
                                    </div>
                                    <div class="bbright-line-v">
                                    </div>
                                </div>
                                <!-- end of insent-line-vertical -->
                            </li>
                            <li>
                                <div class="comments-btn">
                                    Comments<span class="nr-of-items">(2)</span>
                                </div>
                            </li>
                            <li>
                                <div class="bright-insent-line-vertical height-1">
                                    <div class="bdark-line-v">
                                    </div>
                                    <div class="bbright-line-v">
                                    </div>
                                </div>
                                <!-- end of insent-line-vertical -->
                            </li>
                            <li>
                                <div class="attachments-btn">
                                    Attachments<span class="nr-of-items">(23)</span>
                                </div>
                            </li>
                            <li>
                                <div class="bright-insent-line-vertical height-1">
                                    <div class="bdark-line-v">
                                    </div>
                                    <div class="bbright-line-v">
                                    </div>
                                </div>
                                <!-- end of insent-line-vertical -->
                            </li>
                        </ul>
                        <!-- end of edit bar btn wrapper -->
                    </div>
                    <!-- end of story tab bar -->
                    <div class="tab-body-container">
                        <div class="tab-tasks">
                            TASKS
                        </div>
                        <!-- end of tab tasks -->
                        <div class="tab-comments">
                            COMMENTS
                        </div>
                        <!-- end of tab comments -->
                        <div class="tab-attachments">
                            ATTACHMENTS
                        </div>
                        <!-- end of tab attachments -->
                    </div>
                    <!-- end of tab container -->
                </div>
                <!-- end of backlog-story-body -->
            </div>
            <!-- end of backlog story wrapper -->
        </div>
        <!-- end of product backlog body -->
    </div>
    <!-- end of product backlog wrapper -->
    <!-- sprints ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
    <div class="sprints-wrapper">
        <div class="sprints-header">
            <div id="sprints-trigger" class="triangle-up-down float-left">
            </div>
            <div class="section-name float-left">
                Sprints
            </div>
            <ul class="drag-vertical-gripp float-right">
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
                <li>
                    <div class="drag-vertical-gripp-barr">
                    </div>
                </li>
            </ul>
            <!-- end of drag vertical gripp -->
        </div>
        <!-- end of sprints header -->
        <!-- end of sprints header -->
        <div class="sprints-body">
        </div>
        <!-- end of sprints body -->
    </div>
    <!-- end of sprints wrapper -->
</div>
